<template>
    <div class="find-search">
        <!-- 搜索 -->
        <search>
            <template #sl-icon>
                <svg @click="back" t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg>
            </template>
            <template #sm-inp>
                <input type="text" placeholder="请输入关键词..." v-model="inpV" @keydown="getResult($event)">
           </template>
        </search>

        <!-- 搜索历史 -->
        <div class="history">
            <div class="tit-box">
                <p class="tit">搜索历史</p>
                <p class="clear" v-show="history.length==0?false:true" @click="clearAllHistory">清空搜索历史</p>
            </div>
            <div class="his-box">
                <p class="tip" v-show="history.length==0?true:false">暂无历史搜索记录</p>
                <ul>
                    <li v-for="item,index in history" :key="item.id">
                        <div class="l-text" @click="addClick(item.input)">
                            <svg t="1636701675503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3276" width="200" height="200"><path d="M512 64C264.5 64 64 264.6 64 512s200.5 448 448 448 448-200.6 448-448S759.5 64 512 64z m0 855.1c-224.8-0.4-406.7-182.2-407.1-407.1 0.4-224.8 182.3-406.7 407.1-407.1 224.8 0.4 406.7 182.3 407.1 407.1-0.4 224.9-182.3 406.7-407.1 407.1z" p-id="3277" fill="#dbdbdb"></path><path d="M560.1 504.4c-3.5-18.6-15.7-32.6-33-38.5V228.2h-30.2V465c-19.6 6.4-33 26.4-34.1 47-0.3 5.1 0.6 9.8 1.9 14.3l-124.4 78.1 16.1 25.6 126.4-79.3c8.5 6.1 18.8 9.9 29.2 10.4 24.8 1.3 43.4-18.8 48-41.3 0.8-2.5 1.3-5.1 1.1-7.9 0.2-2.6-0.2-5.1-1-7.5z" p-id="3278" fill="#dbdbdb"></path></svg>
                            <p>{{item.input}}</p>
                        </div>
                        <svg @click="clearHistory(index)" t="1636701743783" class="icon r-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4335" width="200" height="200"><path d="M562.281173 510.800685l294.996664-293.466821c13.94971-13.878079 14.020318-36.367279 0.14224-50.316989-13.913894-13.984503-36.367279-14.020318-50.316989-0.14224L512.034792 460.377272 219.528855 166.982082c-13.842263-13.878079-36.367279-13.94971-50.316989-0.071631-13.913894 13.878079-13.948687 36.403095-0.071631 50.352805L461.576587 510.587837 166.721139 803.876604c-13.94971 13.878079-14.020318 36.367279-0.14224 50.316989 6.939039 6.974855 16.084327 10.497075 25.229614 10.497075 9.073656 0 18.148335-3.451612 25.087375-10.354835l294.926056-293.360398 295.17472 296.064996c6.939039 6.974855 16.048511 10.462283 25.193799 10.462283 9.109472 0 18.184151-3.487428 25.12319-10.390651 13.913894-13.878079 13.94971-36.367279 0.071631-50.316989L562.281173 510.800685z" p-id="4336" fill="#cdcdcd"></path></svg>                    
                    </li>
                </ul>
            </div>
        </div>

        <!-- 热点搜索 -->
        <div class="hots">
            <p class="title">
                冲浪热点
                <span class="update">2021-11-10 12:25更新</span>
            </p>
            <div class="hot-box">
                <div class="hot" v-for="item,index in hotList" :key="item.id" @click="addClick(item.keyword)">
                    <div class="hl">{{index+1}}</div>
                    <div class="hr">
                        <p class="h-tit">{{item.keyword}}</p>
                        <p>{{item.summary}}</p>
                    </div>
                </div>
            </div>
            <p class="more" @click="toMore">查看更多</p>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
import search from "../components/hot-search.vue"
export default {
    name:"Find",
    components:{
        search
    },
    data(){
        return {
            inpV:""
        }
    },
    methods:{
        ...mapMutations(["clearAllHistory","clearHistory","addHistory"]),
        toMore(){
            this.$router.push({path:"/more"})
        },
        back(){
            this.$router.go(-1);
            // this.$router.push("/home/find");
        },
        getResult(event){
            if(this.inpV.length >0 &&event.keyCode ==13){
                this.addHistory(this.inpV)
                this.$store.commit('entry/searchEntry',this.inpV)
                this.$router.push({path:"/findResult"})
            }
        },
        addClick(value){
            this.$store.commit('entry/searchEntry',value)
            this.addHistory(value)
            this.$router.push({path:"/findResult"})
            this.entry.inpKeyword = value;
        }
    },
    computed:{
        ...mapState(["history","entry"]),
        hotList(){
            return this.entry.hotData.slice(0,4);
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.history{
    padding: 20px 20px;
    margin-top: 50px;
    .tit-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .tit{
            font-size: 16px;
            font-weight: bold;
        }
        .clear{
            font-size: 12px;
            color: $moreCol;
        }
        
    }
    .his-box{
        .tip{
            font-size: 12px;
            color: rgb(151, 149, 149);
            text-align: center;
        }
        li{
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            .icon{
                path{
                    fill:#777
                }
            }
            .l-text{
                display: flex;
                align-items: center;
                font-size: 15px;
                color: #888;
                .icon{
                    width: 16px;
                    height: 16px;
                    margin-right: 20px;
                }
            }
            .r-icon{
                width: 12px;
                height: 12px;
            }
        }
    }

}
.hots{
    padding: 20px 20px;
    .title{
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        .update{
            font-size: 14px;
            font-weight: 500;
            color: #888;
            margin-left: 10px;
        }
    }
    .hot-box{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        .hot{
            width: 50%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .hl{
                font-size: 20px;
                color: rgb(223, 184, 85);
                font-weight: bold;
                margin-right: 10px;
            }
            .hr{
                p{
                    font-size: 14px;
                    color: #888;
                }
                .h-tit{
                    color: #333;
                    margin-bottom: 5px;
                }
            }
        }
    }
    .more{
        color: rgb(218, 201, 53);
        font-weight: bold;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
}
</style>